<template>
  <div id="CitySelect">
    <el-cascader clearable :value="data" :disabled="disabled" :placeholder="placeholder" ref="citySelect" popper-class="cityPop" :props="cityListProp" :options="cityList" :show-all-levels="false" @change="handleCityChange"></el-cascader>
  </div>
</template>
<script>
import { getCityList } from "@/util/xc/utils.js";
import { mapState } from "vuex";
export default {
  name: 'CitySelect',
  props: {
    data: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择城市'
    }
  },
  data() {
    return {
      cityData: {
        insuredCity: '',
        insuredCityId: 0,
      },
      cityListProp: { //城市级联选择器配置
        emitPath: false,
        value: 'areaId',
        label: 'areaName',
        children: 'childList',
        leaf: 'isLast'
      },
    };
  },
  computed: {
    ...mapState({
      cityList: state => state.reward.cityList,
    }),
  },
  methods: {
    handleCityChange(data) {
      const nodeData = this.$refs.citySelect.getCheckedNodes()[0];
      if (nodeData) {
        this.cityData.insuredCity = nodeData.label;
        this.cityData.insuredCityId = nodeData.value;
      } else {
        this.cityData.insuredCity = '';
        this.cityData.insuredCityId = 0;
      }

      this.$emit('update:data', this.cityData.insuredCityId);
      this.$emit('change', this.cityData);
    },
  },
  mounted() {
    getCityList();
  }
};
</script>
<style lang="less">
.cityPop {
  height: 200px;
  .el-cascader-panel {
    height: 100%;
  }
}
</style>